<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #big{
            width: 350px;
            height: 350px;
            background: darkcyan;
            margin: 0 auto;
            position: relative;
        }
        #box{
            position: absolute;
            width: 240px;
            height: 240px;
            background: rgb(226, 195, 137);
            opacity: 0.6;
        }
        #bigImg{
            position: absolute;
            width: 540px;
            height: 540px;
            background: cornflowerblue;
            left: 100%;
            top: 0;
            overflow: hidden;
        }
        #bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="box"></div>
        <img src="../images/small.jpg" alt="">
        <div id="bigImg">
            <img src="../images/big.jpg" alt="" id="tu">
        </div>
    </div>
    <script>
        var big = document.getElementById("big")
        var box = document.getElementById("box")
        var tu = document.getElementById("tu")
        var bili = 400 / 800

        box.onmousedown = function(e){
            //获取当前坐标
            console.log(e);
            var nowX = e.pageX
            var nowY = e.pageY
            var left = box.offsetLeft
            var top= box.offsetTop
            document.onmousemove = function(e){
                var newX = e.pageX
                var newY = e.pageY
                var resX = newX - nowX + left
                var resY = newY - nowY + top
                if(resX < 0){
                    resX = 0
                }
                if(resX > big.clientWidth - box.clientWidth){
                    resX = big.clientWidth - box.clientWidth
                }
                if(resY < 0){
                    resY = 0
                }
                if(resY > big.clientHeight - box.clientHeight){
                    resY = big.clientHeight - box.clientHeight
                }
                box.style.left = resX + "px"
                box.style.top = resY + "px"

                //放大镜
                tu.style.left = - resX /bili  + "px"
                tu.style.top = - resY / bili  + "px"
            }
        }
        box.onmouseup = function(){
            document.onmousemove = null
        }

    </script>
</body>
</html>